<template>
<div>
    <div class="recharge">
        <el-dialog
            v-model="state.recharge_show"
            title="在线充值"
        >
            <div class="recharge-content">
                <el-form label-position="right" :model="state.form" label-width="80px">
                    <el-form-item label="充值金额">
                        <el-input v-model="state.form.money" type="number" placeholder="请输入充值金额"></el-input>
                    </el-form-item>
                    <el-form-item label="支付方式">
                        <el-radio-group v-model="state.form.type">
                            <el-radio label="alipay">支付宝</el-radio>
                            <el-radio label="wechat">微信</el-radio>
                            <!--<el-radio label="qqpay">QQ钱包</el-radio>-->
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item class="recharge-btn">
                        <el-button  type="primary" @click="onRecharge">确认充值</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
    <div class="payment">
        <el-dialog
            v-model="state.payment_show"
            title="提交充值"
        >
            <template #header>
                <div class="pay-header-box">
                    <img v-if="state.type=='alipay'" class="pay-logo" src="~/assets/web/images/alipay.png" :alt="state.type">
                    <img v-if="state.type=='wechat'" class="pay-logo" src="~/assets/web/images/wechat-pay.png" :alt="state.type">
                </div>
            </template>
            <div class="pay-box">
                <div class="left">
                    <div class="order-info">
                        <div class="order-info-items">订单标题：{{state.title}}</div>
                        <div class="order-info-items">订单编号：{{state.sn}}</div>
                        <div class="order-info-items">创建用户：{{userInfo.nickname}} <span v-if="userInfo.email">（{{userInfo.email}}）</span></div>
                        <div class="order-info-items"><span>订单价格：</span>
                            <span class="rmb-symbol">￥<span class="amount">{{state.money}}</span></span>
                        </div>
                    </div>
                    <div class="pay_qr">
                        <img v-if="state.code_type == 'qrCode'" :src="state.code_url" style="width: 220px; height: 220px;" :alt="state.title">
                        <iframe v-if="state.code_type == 'iframe'" :srcdoc="state.code_url" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" width="220" height="220" style="overflow: hidden;"></iframe>
                    </div>
                    <el-alert class="qr-tips" type="success" center>
                        <template #title>
                            <div v-if="state.type=='alipay'" class="qr-tips-content">
                                <icon  name="fa fa-buysellads" size="18" color="var(--el-color-success)" />
                                <span>使用支付宝扫码完成支付</span>
                            </div>
                            <div v-if="state.type=='wechat'" class="qr-tips-content">
                                <icon name="fa fa-wechat" size="18" color="var(--el-color-success)" />
                                <span>使用微信扫码完成支付</span>
                            </div>
                        </template>
                    </el-alert>
                </div>
                <div class="right">
                    <img v-if="state.type=='alipay'" class="pay-logo" src="~/assets/web/images/screenshot-alipay.png">
                    <img v-if="state.type=='wechat'" class="pay-logo" src="~/assets/web/images/screenshot-wechat.png">
                </div>
            </div>
        </el-dialog>
    </div>
</div>
</template>

<script setup lang="ts">
import {reactive, watch} from "vue";
import {ElMessage} from "element-plus";
import Icon from "/@/components/icon/index.vue";
import { payment, query } from "/@/api/frontend/chat/pay"
import {useUserInfo} from "/@/stores/userInfo";

const userInfo = useUserInfo()

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    }
})

const state = reactive({
    recharge_show: props.visible,
    payment_show: false,
    form: {
        money: '1.00',
        type: 'alipay'
    },
    title: '',
    sn: '',
    money: '',
    type: '',
    code_url: '',
    code_type: ''
})

watch(() => props.visible, () => {
    state.recharge_show = true
})

const onRecharge = () => {
    if (!state.form.money) {
        ElMessage.warning('请输入充值金额')
        return
    }

    payment(state.form).then(res => {
        if (res.code === 1) {
            state.recharge_show = false
            state.payment_show = true
            state.title = res.data.title
            state.sn = res.data.sn
            state.money = res.data.money
            state.type = res.data.type
            state.code_url = res.data.code_url
            state.code_type = res.data.code_type
        }
    }).catch(res => {
        console.log(res)
    })
}


watch(() => state.recharge_show, () => {
    if (state.recharge_show) {
        const timer = setInterval(() => {
            // 查询支付状态
            query({
                sn: state.sn
            }).then(res => {
                if (res.code === 1) {
                    if (res.data.status === 'success') {
                        ElMessage.success('支付成功')
                        state.payment_show = false
                        state.recharge_show = false
                        clearInterval(timer)
                    }
                }
            })
        }, 3000)
        setTimeout(() => {
            clearInterval(timer)
        }, 60000)
    }
})

</script>

<style scoped lang="scss">
.recharge {
    :deep(.el-dialog) {
        width: 90%;
        max-width: 600px;

        .recharge-content {
            padding: 20px;
            .recharge-btn {
                padding-top: 10px;
            }
        }
    }
}
.payment {
    :deep(.el-dialog) {
        width: 90%;
        max-width: 700px;
        .el-dialog__body {
            padding: var(--el-dialog-padding-primary);
            padding-top: 0;
        }
        .pay-header-box {
            border-bottom: 1px solid var(--el-border-color-lighter);
            padding-bottom: 10px;
            .pay-logo {
                height: 30px;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none;
            }
        }
        .pay-box {
            display: flex;
            .left {
                .order-info {
                    padding: 15px 0;
                    .order-info-items {
                        line-height: 22px;
                        .rmb-symbol {
                            color: var(--el-color-danger);
                            font-size: 13px;
                            margin-left: -3px;
                            .amount {
                                color: var(--el-color-danger);
                                font-size: 16px;
                            }
                        }
                    }
                }
                .pay_qr {
                    display: flex;
                    justify-content: center;
                    margin-bottom: 25px;
                    position: relative;
                }
                .qr-tips {
                    margin-top: 15px;
                    .qr-tips-content {
                        align-items: center;
                        display: flex;
                        justify-content: center;
                        .icon {
                            margin-right: 5px;
                        }
                    }
                }
            }
            .right {
                margin-left: auto;
            }
        }
    }
}
@media screen and (max-width: 768px) {
    .payment {
        .right {
            display: none;
        }
    }
}
</style>
